<template>
  <aside class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
    <button type="button" class="btn btn-lg btn-block btn-danger mb-1" @click="addBuddy"> <i class="el-icon-circle-plus-outline"></i> 添加好友 </button>
    <button slot="reference" type="button" class="btn btn-lg btn-block btn-outline-primary mb-3" @click="writingMessage"> <i class="el-icon-edit"></i> 留&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;言 </button>
    <el-dialog
      title="给Ta留言"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      top="30vh"
    >
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textareaValue"
        maxlength="30"
        show-word-limit
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="writingMessageSub">留言</el-button>
        <el-button @click="dialogVisible=!dialogVisible">取消</el-button>
      </span>
    </el-dialog>
    <div class="box shadow-sm border rounded bg-white mb-3">
      <div class="box-title border-bottom p-3">
        <h6 class="m-0">留言墙</h6>
      </div>
      <div class="box-body p-2">
        <div class="shadow-sm border rounded bg-white job-item mb-3" v-if="words.length==0">
          <el-empty description="暂无留言,快去给Ta留言吧！" image="http://localhost:3001/file/notalk.png" :image-size="100"></el-empty>
        </div>
        <div class="shadow-sm border rounded bg-white job-item" v-else>
          <div class="list" v-for="(item) in words" :key="item.id">
            <div class="p-1 showBord">
              <details>
                <summary>{{item.message.substring(0,6)+'...'}}</summary>
                <p class="p-1">{{item.message}}</p>
              </details>
            </div>
            <div class="p-1" style="color:rgb(0, 123, 255)">{{$moment(item.create_time).format('YYYY-MM-DD')}}</div>
          </div>
        </div>
      </div>
    </div>
    <hot-activity></hot-activity>
  </aside>
</template>

<script>
import HotActivity from '../common/hotActivity.vue';

export default {
  data() {
    return {
      windowWidth: 1000,
      dialogVisible: false,
      textareaValue: '',
      addBuddyStore: this.newStore(),
      getLeaveWordsStore: this.newStore(),
      subLeaveWordsStore: this.newStore(),
      words: [],
    };
  },
  components: {
    HotActivity,
  },

  mounted() {
    const that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => (() => {
      that.windowWidth = document.documentElement.clientWidth;
    })();
  },
  computed: {
    dialogWidth() {
      if (this.windowWidth <= 600) {
        return '90%';
      }
      if (this.windowWidth > 600 && this.windowWidth <= 950) {
        return '65%';
      }
      return '50';
    },
  },
  created() {
    this.spost(this.getLeaveWordsStore, "/getLeaveWords", { id: this.$route.query.id }).then(
      (res) => {
        this.words = res.d.data;
      },
    );
  },
  methods: {
    writingMessage() {
      this.dialogVisible = true;
    },
    writingMessageSub() {
      this.spost(this.subLeaveWordsStore, "/subLeaveWords", {
        toId: this.$route.query.id,
        fromId: this.$store.state.userInfo.userid,
        message: this.textareaValue,
      }).then(
        () => {
          this.$message.success('留言成功');
          this.textareaValue = '';
          this.dialogVisible = false;
        },
      );
    },
    addBuddy() {
      if (Number(this.$store.state.userInfo.userid) === Number(this.$route.query.id)) {
        this.$message.warning("不能添加自己为好友哦！");
      } else {
        this.spost(this.addBuddyStore, "/addBuddy", {
          userId: this.$store.state.userInfo.userid,
          friendId: this.$route.query.id,
        }).then((res) => {
          this.$message.success(res.d.message);
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.list{
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .showBord{
    margin-left: 1rem;
    width: 60%;
}
}

</style>
